<template>
	<view>
		<!-- <view class="cu-form-group margin-top">
			<view class="title">收款方式</view>
			<picker @change="PickerChange" :value="type2" :range="picker">
				<view class="picker">
					{{type2}}
				</view>
			</picker>
		</view> -->
		<view class="cu-form-group" v-if="form.type ==1">
			<view class="title">{{i18n.set.nickname}}</view>
			<input class="text" :placeholder="i18n.set.inputnickname" v-model="form.nickname"></input>
		</view>
		
		
		
		<view class="cu-form-group" v-if="form.type ==2">
			<view class="title">{{i18n.set.paypassword}}</view>
			<input class="number"  :placeholder="i18n.set.inputpassword2" v-model="form.password2"></input>
		</view>

		<view class="cu-bar bg-white margin-top" v-if="form.type ==3">
			<view class="action">
				{{i18n.set.inputhead}}
			</view>
			<!-- <view class="action">
						{{imgList.length}}/4
					</view> -->
		</view>
		<view class="cu-form-group"  v-if="form.type ==3">
			<view class="grid col-1 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<!-- style="margin: 15px auto;" -->
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		
		<view class="cu-form-group" v-if="form.type ==4">
			<view class="title">imtoken</view>
			<input class="text" :placeholder="i18n.set.inputimtoken" v-model="form.imtoken"></input>
		</view>
		
		<view class="cu-form-group" v-if="form.type ==5">
			<view class="title">{{i18n.set.password}}</view>
			<input class="number" :placeholder="i18n.set.inputpassword" v-model="form.password"></input>
		</view>
		
		<view class="cu-form-group" v-if="form.type ==6">
			<view class="title">{{i18n.set.mobile}}</view>
			<input class="number" :placeholder="i18n.set.inputmobile" v-model="form.mobile"></input>
		</view>
		<view class="cu-form-group" v-if="form.type ==6">
			<view class="title">{{i18n.set.mobilecode}}</view>
			<input type="number" :placeholder="i18n.set.reqmobilecode" v-model="form.code"></input>
			<button class='cu-btn bg-yellow round' @tap="bindCode">{{getCodeText}}</button>
		</view>
		
		<view class="cu-form-group" v-if="form.type ==7">
			<view class="title">{{i18n.set.email}}</view>
			<input class="number"  :placeholder="i18n.set.inputemail" v-model="form.email"></input>
		</view>
		<view class="cu-form-group" v-if="form.type ==7">
			<view class="title">{{i18n.set.emailcode}}</view>
			<input type="number":placeholder="i18n.set.reqemailcode" v-model="form.code"></input>
			<button class='cu-btn bg-yellow round' @tap="bindCode2">{{getCodeText}}</button>
		</view> 

		<view class="cu-form-group" v-if="form.needcode ==1">
			<view class="title">{{i18n.set.bindmobile}}</view>
			<input type="number" :value="userinfo.mobile" disabled="disabled"></input>
		</view> 
		<view class="cu-form-group" v-if="form.needcode ==1">
			<view class="title">{{i18n.set.mobilecode}}</view>
			<input type="number" :placeholder="i18n.set.reqmobilecode" v-model="form.code"></input>
			<button class='cu-btn bg-yellow round' @tap="getCode">{{getCodeText}}</button>
		</view>
		<view class="cu-form-group" v-if="form.needcode ==2">
			<view class="title">{{i18n.set.bindemail}}</view>
			<input type="text" :value="userinfo.email" disabled="disabled"></input>
		</view>
		<view class="cu-form-group" v-if="form.needcode ==2">
			<view class="title">{{i18n.set.emailcode}}</view>
			<input type="number" :placeholder="i18n.set.reqemailcode" v-model="form.code"></input>
			<button class='cu-btn bg-yellow round' @tap="getCode2">{{getCodeText}}</button>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">设为默认</view>
			<switch @change="switchChange" :class="form.is_default == 1 ?'checked':''" :checked="form.is_default == 1"></switch>
		</view> -->

		<view class="cu-form-group">
			<view class="padding flex flex-direction " style="width: -webkit-fill-available;">
				<button class="cu-btn bg-yellow lg" @click="confirm">{{i18n.set.confirm}}</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				picker: ['支付宝', '微信支付', '银行卡'],
				type2: '支付宝',
				code: '',
				imgList: [],
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				form: {
					needcode: 0,
					nickname: '',
					avatar: '',
					// mobile: this.userinfo.mobile,
					code: '',
					password: '',
					password2: '',
					imtoken: '',
				}
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(option) { 
			uni.setNavigationBarTitle({
				title:option.title
			})
			this.form = JSON.parse(option.data) 
			if(this.form.avatar !==''){
				this.imgList.push(this.form.avatar);
			} 
			this.getCodeText= this.i18n.login.getcode;
		},
		methods: {
			...mapActions(['getUserinfo']),
			...mapMutations(['SAVE_USERINFO']),
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userinfo.mobile))) {
					this.$api.msg(this.i18n.popup.errmobile);
					return;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get', {
					mobile: this.userinfo.mobile,
					event: 'editinfo'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			getCode2() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.userinfo.email))) {
					uni.showToast({
						title:  this.i18n.popup.erremail,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"
			
				this.$http.post('index.code.get2', {
					email: this.userinfo.email,
					event: 'editinfo'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title:this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			bindCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile))) {
					this.$api.msg(this.i18n.popup.errmobile);
					return;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"
			
				this.$http.post('index.code.get', {
					mobile: this.form.mobile,
					event: 'editinfo'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			bindCode2() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.form.email))) {
					uni.showToast({
						title: this.i18n.popup.erremail,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"
			
				this.$http.post('index.code.get2', {
					email: this.form.email,
					event: 'editinfo'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText =  this.i18n.login.Reacquire+ "(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText =  this.i18n.login.getcode;
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = this.i18n.login.Reacquire+"(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			switchChange(e) {
				this.form.is_default = e.detail.value ? 1 : 0;
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
 
						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {}, 
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList.push(res.tempFilePaths[0]);
									this.form.avatar = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm2,
					cancelText: this.i18n.popup.cancel,
					confirmText:this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.form.avatar = '';
						}
					}
				})
			},
			PickerChange(e) {

				this.form.type = parseInt(e.detail.value) + 1;
				this.type2 = this.picker[e.detail.value];

			},
			//提交
			confirm() {
				// if (!this.form.nickname) {
				// 	this.$api.msg('请填写姓名');
				// 	return;
				// }
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userinfo.mobile))) {
				// 	this.$api.msg('请输入正确的手机号码');
				// 	return;
				// } 
				// if (!this.form.address) {
				// 	this.$api.msg('请填写账号');
				// 	return;
				// }
				if (this.form.needcode == 1) {
					if(this.userinfo.mobile==''){
						this.$api.msg(this.i18n.set.inputbindmobile);
						return;
					}
					this.form.mobile = this.userinfo.mobile;
					if (!this.form.code) {
						this.$api.msg(this.i18n.set.reqmobilecode);
						return;
					}
				} 
				if (this.form.needcode == 2) {
					 console.log(this.userinfo.email=='')
					if(this.userinfo.email==''){
						this.$api.msg(this.i18n.set.inputbindemail);
						return;
					}
					this.form.email = this.userinfo.email;
					if (!this.form.code) {
						this.$api.msg(this.i18n.set.reqemailcode);
						return;
					}
				} 
 
				this.$http.post('user.info.edit', this.form).then(res => { 
					if(res.code==1){
						uni.showToast({
							title: this.i18n.popup.success
						})
						this.SAVE_USERINFO(res.data)
						setTimeout(() => {
							this.$api.prePage()
						}, 800)
					} 
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
	}
</style>
